<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <input v-model="bookName" type="text">
        <p v-color="'pink'">{{bookName | book}}</p>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            bookName:"天龙八部"
        },
        filters:{
            book(v){
                return "《"+v+"》";
            }
        },
        // directives 自定义指令
        directives:{
            color:{
                // 在挂载完成前执行，数据发生更新不会再次执行。
                // binds 参数
                bind(el,binds){
                    console.log("bind")
                    el.style.color = binds.value;
                }
            }
            // color(el,binds){
            //     el.style.color = binds.value;
            // }
        }
    })
</script>
</html>